<template>
  <IFexHeaderMain>
    <template #header>
      <image :src="'/static/img/fc/fc_top.png'" mode="aspectFit" style="width: 100vw; max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast" />
    </template>
    <view class="home_main whov">
      <scroll-view scroll-y class="wh_auto scroll_main" @scroll="onScroll">
        <view class="fc_name flex_left_right">
          <view class="flex_left fc_img">
            <image :src="'/static/img/fc/fc_home.png'" class="fc_img" mode="aspectFit" />
          </view>
          <view class="flex_left" style="margin-left: 30rpx">
            <view class="wrapper"> 您好，{{ username }} </view>
          </view>
        </view>
        <image :src="'/static/img/fc/fc_home_top.png'" mode="aspectFit" style="width: 100vw; max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast" />
        <view class="fc_tab">
          <view class="tab_text" @click.prevent.stop="activeTab = 1">
            <view>遇事豫办</view>
            <view class="ysyb" :style="{ border: activeTab == 2 ? 0 : '' }"></view>
          </view>
          <view class="tab_text" @click.prevent.stop="activeTab = 2">
            <view>服务随行</view>
            <view class="ysyb" :style="{ border: activeTab == 1 ? 0 : '' }"></view>
          </view>
        </view>
        <view style="height: 1800rpx">
          <image :src="'/static/img/fc/home_tab_1.png'" v-if="activeTab == 1" mode="aspectFit" style="width: 100vw; max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast" />
          <image :src="'/static/img/fc/home_tab_2.png'" @click="onClick" v-if="activeTab == 2" mode="aspectFit" style="width: 100vw; max-width: 100%; height: auto; image-rendering: -webkit-optimize-contrast" />
        </view>
      </scroll-view>
      <view v-if="showBuyCar" class="kj_main">
        <view class="title_text" @click.prevent.stop="activeTab = 1">
          <view>遇事豫办</view>
          <view class="ysyb" :style="{ border: activeTab == 2 ? 0 : '' }"></view>
        </view>
        <view class="title_text" @click.prevent.stop="activeTab = 2">
          <view>服务随行</view>
          <view class="ysyb" :style="{ border: activeTab == 1 ? 0 : '' }"></view>
        </view>
      </view>
    </view>
    <template #footer>
      <image :src="'/static/img/fc/fc_bottom.png'" />
    </template>
  </IFexHeaderMain>
</template>

<script setup lang="ts" name="index">
  import { computed, onMounted, ref } from 'vue'
  import IFexHeaderMain from '@/components/container/IFexHeaderMain.vue'
  import { getDetailApi } from '@/api/comm'
  import useUserInfoStore from '@/store/userInfo'

  const showBuyCar = ref(false)
  const username = computed(() => {
    const userInfoStore = useUserInfoStore()
    return userInfoStore.getDetailData.userName
  })
  const activeTab = ref(1)
  const onClick = () => {
    uni.navigateTo({ url: '/pages/fc/zjfw' })
  }
  const onScroll = (e: any) => {
    const scrollTop = e?.detail?.scrollTop || e?.target?.scrollTop || 0
    showBuyCar.value = scrollTop >= 740
  }

  onMounted(async () => {
    const result = await getDetailApi({ dataType: 'fangchan' })
    if (result) {
      const userInfoStore = useUserInfoStore()
      userInfoStore.setDetailData(JSON.parse(result.data.dataJson))
    }
  })
</script>

<style scoped lang="scss">
  .scroll_main {
    position: relative;
    .fc_name {
      position: absolute;
      top: 216rpx;
      left: 64rpx;
      z-index: 999999;
      font-size: 28rpx;
      color: #1f1f20;
      .fc_img {
        border-radius: 50%;
        overflow: hidden;
        width: 75rpx;
        height: 75rpx;
      }
    }
  }
  .home_main {
    background: #ffffff;
    position: relative;
  }
  .kj_main {
    background-color: #ffffff;
    position: absolute;
    top: 0rpx;
    left: 0rpx;
    right: 0rpx;
    font-size: 32rpx;
    padding-left: 30rpx;
    .ysyb {
      border-bottom: 1px solid #b5363f;
      margin: 0 25rpx;
    }
    .title_text {
      display: inline-block;
      margin-right: 30rpx;
    }
  }
  .fc_tab {
    padding-left: 30rpx;
    .tab_text {
      display: inline-block;
      margin-right: 30rpx;
      font-size: 36rpx;
      .ysyb {
        border-bottom: 4px solid #b5363f;
        margin: 0 25rpx;
        margin-top: 4rpx;
      }
    }
  }
  uni-image {
    height: auto;
  }
</style>
